<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 <script type="text/babel">
    let root = document.getElementById('root')
    class TemperatureInput extends React.Component {
        constructor(props) {
            super(props)
            this.handleChange = this.handleChange.bind(this)
        }
        handleChange() {
            this.props.onShareNum(event.target.value)
        }
        turnNumber(num) {
            if(!num) {
                return ''
            }
            return this.props.s * num
        }
        render() {
            let num = this.turnNumber(this.props.number)
            return (
                <div>
                    <input type="text" value={this.props.number} onChange={this.handleChange} />
                    <h2>{num}</h2>    
                </div>
            )
        }
    }
    class NumBox extends React.Component {
        constructor(props) {
            super(props)
            this.state = {num: ''}
            this.shareNum = this.shareNum.bind(this)
        }
        shareNum(num) {
            this.setState({num})
        }
        render() {
            return (
                <div>
                    <TemperatureInput s={1} number={this.state.num} onShareNum={this.shareNum}/>
                    <TemperatureInput s={2} number={this.state.num} onShareNum={this.shareNum}/>
                </div>
            )
        }
    }
    ReactDOM.render(<NumBox name=""/>,root)
    
</script>
</body>
</html>